<!--
 * @Author: your name
 * @Date: 2020-11-07 10:50:27
-->
<template>
  <a-card>
    <div v-show="showSpin">
      <a-spin tip="正在导出..." size="large">
        <div class="spin-content"></div>
      </a-spin>
    </div>
    <!-- 搜索栏 -->
    <a-form-model :model="formdata" v-bind="layout">
      <a-row>
        <!-- xxl: 4, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 响应式参照 -->
        <a-col :xl="8" :lg="12" :md="8" :sm="24" :xs="24">
          <a-form-model-item label="仓库名称">
            <a-select
              v-model="formdata.depotName"
              @change="
                (val1) => {
                  const arr1 = val1.split('|');
                  formdata.depotId = arr1[0];
                  formdata.depotNo = arr1[1];
                  formdata.depotName = arr1[2];
                }
              "
              showSearch
              style="width: 100%"
            >
              <a-select-option
                v-for="item in storageList"
                :key="item.depotId"
                :value="
                  item.depotId + '|' + item.depotNo + '|' + item.depotName
                "
                >{{ item.depotNo }} {{ item.depotName }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :sm="24" :xs="24">
          <a-form-model-item ref="sort" label="存货分类" prop="sort">
            <a-tree-select
              showSearch
              v-model="formdata.sort"
              style="width: 100%"
              allow-clear
              :tree-data="inventoryNoList"
              @change="sortchangeSearch"
              onSelect
              tree-node-filter-prop="title"
              :replace-fields="replaceFields"
            >
            </a-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col :lg="8" :md="24" :sm="24">
          <a-form-model-item label="存货名称">
            <a-select
              v-model="formdata.inventoryName"
              @search="handleSearch"
              @change="
                (val) => {
                  const arr = val.split('|');
                  formdata.inventoryNo = arr[0];
                  formdata.inventoryName = arr[1];
                  formdata.specificationsModel = arr[2] || '';
                  formdata.unit = arr[3];
                  formdata.inventoryId = arr[4];
                }
              "
              showSearch
            >
              <a-select-option
                v-for="item in inventoryInformationFileIdlist"
                :key="item.value"
                :value="
                  item.inventoryNo +
                  '|' +
                  item.inventoryName +
                  '|' +
                  item.specificationsModel +
                  '|' +
                  item.unit +
                  '|' +
                  item.inventoryId
                "
                >{{ item.inventoryNo }}{{ item.inventoryName
                }}{{ item.specificationsModel }}
              </a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <!-- xxl: 4, xl: 2, lg: 2, md: 1, sm: 1, xs: 1 响应式参照 -->
        <a-col :md="8" :sm="24"> </a-col>
        <a-col :lg="8" :md="24" :sm="24"> </a-col>
        <a-col :md="8" :sm="24" :style="{ textAlign: 'right', right: '10px' }">
          <a-button type="primary" @click="getsearch()">查询</a-button>
          <a-button style="margin-left: 8px" @click="reset()">重置</a-button>
          <a-button style="margin-left: 8px" @click="exportToExcel()"
            >导出</a-button
          >
        </a-col>
      </a-row>
      <br />
    </a-form-model>
    <!---表格数据--->
    <a-table
      :rowKey="
        (record, index) => {
          return index;
        }
      "
      @change="handleTableChange"
      :columns="columns"
      :pagination="pagination"
      id="myTable"
      :data-source="Inventorysummarylist"
      :scroll="{ x: 1500 }"
      size="small"
    >
    </a-table>
  </a-card>
</template>
<script>
// ------- 公共接口 ------- ;
import { CommonAjax } from "@/services/modules/common";
const comHttp = new CommonAjax();
import FileSaver from "file-saver";
import { sheet2blob } from "@/utils/export.js";
import XLSX from "xlsx";
// import { ZiDianBiaoHttp } from "@/services/modules/ZiDianBiao.js";
// const zdbHttp = new ZiDianBiaoHttp(); // 字典表
import { KuCunHuiZongAjax } from "../../services/modules/ChaXunYuTongJi/KuCunHuiZong";
const $http = new KuCunHuiZongAjax();
const columns = [
  {
    title: "序号 ",
    dataIndex: "xuhao",
    key: "0",
    width: 50,
    align: "center",
  },
  {
    title: "仓库编码",
    dataIndex: "storcode",
    key: "1",
    align: "center",
    width: 150,
  },
  {
    title: "仓库名称",
    dataIndex: "storname",
    key: "2",
    align: "center",
    width: 150,
  },
  // {
  //   title: "所属单位",
  //   dataIndex: "StorageUnit",
  //   key: "3",
  //   align: "center",
  //   width: 150,
  // },
  {
    title: "存货分类",
    dataIndex: "invclassname",
    key: "4",
    align: "center",
    width: 150,
  },
  {
    title: "存货编码",
    dataIndex: "invcode",
    key: "5",
    align: "center",
    width: 150,
  },
  {
    title: "存货名称",
    dataIndex: "invname",
    key: "6",
    align: "center",
    width: 150,
  },
  {
    title: "规格型号",
    dataIndex: "invspec",
    key: "7",
    align: "center",
    width: 150,
  },

  {
    title: "单位",
    dataIndex: "measname",
    key: "8",
    align: "center",
    width: 150,
  },
  {
    title: "账面数量",
    dataIndex: "bookQuantity",
    key: "9",
    align: "center",
    width: 150,
  },
  {
    title: "即时数量",
    dataIndex: "immediateQuantity",
    key: "10",
    align: "center",
    width: 150,
  },
];
export default {
  data() {
    return {
      showSpin: false, //打印加载中
      replaceFields: {
        children: "syncInventoryClassificationEntityList",
        title: "invclassname",
        value: "pkInvcl",
      },

      inventoryInformationFileIdlist: [], //存货编码与存货名称字典表
      inventoryName: [], //存货名称

      storageList: [], //仓库名称列表
      inventoryNoList: [], //存货分类列表
      formdata: {
        sort: [], //存货分类
        inventoryInformationFileId: [], //存货编码,存货名称
        depotName: [], //!仓库名称
        depotId: "", //!仓库id
        depotNo: [], //!仓库No
        inventoryId: "", //存货信息ID
        inventoryName: [], //存货名称
      },
      columns,
      Inventorysummarylist: [],
      rules: {},
      //列表分页
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        pageSizeOptions: ["10"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      },
      queryParam: {
        //查询参数
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
      },
      layout: {
        labelCol: { span: 8 }, //字
        wrapperCol: { span: 15 }, //框内大小
      },
    };
  },
  methods: {
    handleSearch(value) {
      //模糊查询
      this.inventoryInformationFileIdlist = [];
      console.log("value", value);
      let query = "?name=" + value;
      console.log("query", query);
      if (value == "" || value == null) {
        this.goodsList = [];
      } else {
        comHttp.getgetSearchInventoryInformationFile(query).then((res) => {
          console.log("结果为", res);
          // this.goodsList = res.result;
          for (let i = 0; i < res.result.length; i++) {
            // if (
            //   res.result[i].invspec == "null" ||
            //   res.result[i].invspec == null
            // ) {
            //   res.result[i].specificationsModel = "";
            // }
            // if (res.result[i].unit == "null" || res.result[i].unit == null) {
            //   res.result[i].unit = "";
            // }
            let data = {
              inventoryId: res.result[i].pkInvbasdoc,
              inventoryNo: res.result[i].invcode, //存货编码
              inventoryName: res.result[i].invname, //存货名称
              specificationsModel: res.result[i].invspec, //规格型号
              unit: res.result[i].measname, //单位
            };
            this.inventoryInformationFileIdlist.push(data);
          }
          console.log(
            "inventoryInformationFileIdlist",
            this.inventoryInformationFileIdlist
          );
        });
      }
    },
    //    // 表单仓库点击按钮
    // formDepotNameSelectChange(value) {
    //   let array = value.split("|");

    //   // 获取物品信息列表,根据仓库编码
    //   // let goodsList = this.getGoodSInfo(array[0]);

    //   // 根据仓库查询物品信息,并存储到相应的物品信息表中
    //   for (let i = 0; i < this.DataSource.length; i++) {
    //     this.DataSource[i].depotId = array[0];
    //     this.DataSource[i].depotNo = array[1];
    //     this.DataSource[i].depotName = array[2];
    //     //this.DataSource[i].batchNumber = this.todayBatchNumber;
    //     // ---                                      ---//
    //     this.getGoodSInfo2(this.DataSource[i], array[0]);
    //     this.getPositionListById(this.DataSource[i], array[0]); // 获取仓位信息
    //   }
    //   console.log("仓库获取:::::", this.DataSource);

    //   // let array = value.split("|");
    //   // console.log(array[0]);
    //   // let key = option.key;
    //   // // 获取物品信息列表,根据仓库编码
    //   // let goodsList = this.getGoodSInfo(key);
    //   // // 根据仓库查询物品信息,并存储到相应的物品信息表中
    //   // for (let i = 0; i < this.DataSource.length; i++) {
    //   //   this.DataSource[i].depotNo = array[0];
    //   //   this.DataSource[i].depotName = array[1];
    //   //   this.DataSource[i].depotId = key;
    //   //   this.DataSource[i].goodsList = goodsList;
    //   //   // this.positionList(this.DataSource[i]); // 获取仓位信息
    //   // }
    //   // console.log("仓库获取:::::", this.DataSource);
    // },
    // // 选择仓库编码的change触发函数---Xiugai弹窗
    // finishedProductDepotChange(value, option) {
    //   console.log("value", value);
    //   console.log("option", option);
    //   // let newValue = value.split("|");
    // },
    //存货分类-搜索
    sortchangeSearch(value, option) {
      console.log("选择的存货分类是:", `selected ${value}`);
      this.addForm.sort = value;
      console.log(option, "11");
    },
    //获取列表数据
    getInventorysummarylist() {
      let current = this.pagination.current;
      $http
        .getInventorysummarylist(
          "?pkStordoc=" + //仓库
            this.formdata.depotId +
            "&pkInvcl=" + //存货分类
            this.formdata.sort +
            "&pkInvbasdoc=" + //存货信息ID
            this.formdata.inventoryId +
            "&pageNo=" +
            current
        )
        .then((res) => {
          const pagination = { ...this.pagination }; //分页
          pagination.total = res.result.total; //分页
          pagination.pageSize = res.result.pageSize; //分页
          this.pagination = pagination; //分页
          this.maxSize = res.result.total;
          console.log(this.Inventorysummarylist);

          this.Inventorysummarylist = res.result.list;
          for (let i = 0; i < res.result.list.length; i++) {
            this.Inventorysummarylist[i].xuhao =
              (pagination.current - 1) * 10 + i + 1;
          }
           if (
            this.Inventorysummarylist == undefined ||
            this.Inventorysummarylist.length <= 0
          ) {
            this.$message.warning("暂无符合查询条件的数据");
          }
        });
        
    },
    getsearch() {
      let current = this.pagination.current;
      console.log("this.formdata.depotName", this.formdata.depotName);
      console.log("this.formdata.sort", this.formdata.sort);
      console.log("this.formdata.inventoryName", this.formdata.inventoryName);

      $http
        .getInventorysummarylist(
          "?pkStordoc=" + //仓库
            this.formdata.depotId +
            "&pkInvcl=" + //存货分类
            this.formdata.sort +
            "&pkInvbasdoc=" + //存货信息档案ID
            this.formdata.inventoryId +
            "&pageNo=" +
            current
        )
        .then((res) => {
          const pagination = { ...this.pagination }; //分页
          pagination.total = res.result.total; //分页
          pagination.pageSize = res.result.pageSize; //分页
          this.pagination = pagination; //分页
          console.log(this.Inventorysummarylist);

          this.Inventorysummarylist = res.result.list;
          for (let i = 0; i < res.result.list.length; i++) {
            this.Inventorysummarylist[i].xuhao =
              (pagination.current - 1) * 10 + i + 1;
          }
           if (
            this.Inventorysummarylist == undefined ||
            this.Inventorysummarylist.length <= 0
          ) {
            this.$message.warning("暂无符合查询条件的数据");
          }
        });
    },

    // 获取仓库
    getApplyStorage() {
      this.storageList = [];
      // 获取仓库名称
      comHttp.getAllNumberName_new_forU8c().then((res) => {
        console.log("获取所有仓库", res);
        for (let i = 0; i < res.result.length; i++) {
          let data = {
            depotName: res.result[i].storname,
            depotNo: res.result[i].storcode,
            depotId: res.result[i].pkStordoc,
          };
          this.storageList.push(data);
        }
        console.log("仓库名称列表", this.storageList);
      });
    },

    // 导出
    exportToExcel() {
      this.showSpin = true; //打印加载中
      $http
        .getInventorysummarylist(
          "?pageNo=1&pageSize=" +
            this.maxSize +
            "&pkStordoc=" +
            this.formdata.depotId +
            "&pkInvcl=" + //存货分类
            this.formdata.sort +
            "&pkInvbasdoc=" + //存货信息档案ID
            this.formdata.inventoryId
        )
        .then((res) => {
          console.log("导出的数据", res.result.list);
          let array = res.result.list;
          this.exportBasic(array);
        });
    },
    //  接收数组，进行导出
    exportBasic(Array) {
      console.log("要导出的数据为:::::", Array);
      //  规整要导出的数据:::::
      let array = [];
      for (let i = 0; i < Array.length; i++) {
        let data = {
          序号: i + 1,
          仓库编码: Array[i].storcode,
          仓库名称: Array[i].storname,
          存货分类: Array[i].invclassname,
          存货编码: Array[i].invcode,
          存货名称: Array[i].invname,
          规格型号: Array[i].invspec,
          单位: Array[i].measname,
          账面数量: Array[i].bookQuantity,
          即时数量: Array[i].immediateQuantity,
        };
        array.push(data);
      }
      // 生成 sheet 表格 数据
      let sheet = XLSX.utils.json_to_sheet(array, {
        // 对导出内容进行相应的排序,手动排序。
        header: [
          "序号",
          "仓库编码",
          "仓库名称",
          "存货分类",
          "存货编码",
          "存货名称",
          "规格型号",
          "单位",
          "账面数量",
          "即时数量",
        ],
      });
      // 生成导出表格
      let blob = sheet2blob(sheet);
      try {
        FileSaver.saveAs(
          new Blob([blob], {
            type: "application/octet-stream",
          }),
          "库存汇总表.xlsx" // 导出文件夹名称
        );
      } catch (e) {
        console.log(e);
      }
      this.showSpin = false; //导出中
    },
    getInventoryClassificationList() {
      //获取存货分类
      this.treeDetilData = [];
      comHttp.GetSaveCargoClassification().then((res) => {
        console.log("存货分类！！！！！！！", res);
        this.inventoryNoList = res.result;
      });
    },

    //重置
    reset() {
      this.ResetTab();

      this.formdata = {
        inventoryId: "", //存货信息ID
        depotId: "", //仓库
        depotNoId: [], //仓库编码、仓库名称id
        sort: [], //存货分类
        inventoryInformationFileId: [], //存货编码,存货名称
        finishedProductDepot: [], //所属单位
        depotName: [],
      };

      this.getInventorysummarylist();
    },
    ResetTab() {
      this.pagination = {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据

        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
        showSizeChanger: true, // 显示页面条数改变
        showQuickJumper: true, // 显示快速跳转
      };
      //查询参数
      this.queryParam = {
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      };
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;
      this.getInventorysummarylist();
    },
  },
  mounted() {
    this.getInventorysummarylist(); //库存汇总列表
    //this.getdepotNoIdlist(); //仓库名称
    // this.getsortlist(); //存货分类
    // this.getinventoryInformationFileIdlist(); //
    //this.getDepotIdlist(); //获取所属单位字典表
    this.getApplyStorage(); // 获取仓库
    this.getInventoryClassificationList(); // 获取存货分类
  },
  computed: {},
};
</script>
<style lang="less" scoped>
</style>